import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:yysk_app/utils/colors.dart';
import 'package:yysk_app/utils/helper.dart';
import 'package:yysk_app/utils/js_tool.dart';
import 'package:yysk_app/widget/image_asset_widget.dart';

class SearchInputWidget extends StatefulWidget {
  final String hint;
  final String? title;
  final String? titleTip;
  final bool? obscureText;
  final bool? disabled;
  final bool? visible;
  final bool? showClose;
  final ValueChanged<String>? onChanged;
  final ValueChanged<String>? onSearch;
  final TextInputType? inputType;
  final TextEditingController? controller;
  final double? buttonRadio;
  final String? errorText;
  final int? maxLines;
  final double? height;
  final int? maxLength;
  final Color backgroundColor;
  final FocusNode? focusNode;
  final double? top;
  final String? inputFormatters;
  const SearchInputWidget({
    super.key,
    required this.hint,
    this.title,
    this.titleTip,
    this.onChanged,
    this.inputType,
    this.obscureText = false,
    this.visible = false,
    this.controller,
    this.disabled = false,
    this.buttonRadio = 6,
    this.errorText,
    this.maxLength,
    this.maxLines,
    this.height,
    this.focusNode,
    this.backgroundColor = AppColors.backgroundColorGreyBold,
    this.onSearch,
    this.top,
    this.showClose,
    this.inputFormatters,
  });

  @override
  State<SearchInputWidget> createState() => _InputWidgetState();
}

class _InputWidgetState extends State<SearchInputWidget> {
  bool _visible = false;

  @override
  void initState() {
    super.initState();
    _visible = widget.visible!;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [_input()],
    );
  }

  _input() {
    return Container(
      // width: 343.px,
      height: 31.px,
      padding: EdgeInsets.only(left: 16.px, right: 8.px),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16.px),
        color: AppColors.backgroundColorGrey2,
        // image: DecorationImage(
        //   image: AssetImage('static/images/mall/search_bg.png'),
        //   fit: BoxFit.fitWidth,
        // ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          ImageAssetWidget(
            imageUrl: 'static/images/search/find.png',
            width: 14.px,
            height: 14.px,
          ),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                TextField(
                  inputFormatters:
                      widget.inputFormatters == 'num'
                          ? [FilteringTextInputFormatter.digitsOnly]
                          : null,
                  focusNode: widget.focusNode,
                  keyboardType: widget.inputType,
                  onChanged: widget.onChanged,
                  obscureText: _visible,
                  enabled: !widget.disabled!,
                  controller: widget.controller,
                  maxLines: widget.maxLines ?? 1,
                  maxLength: widget.maxLength ?? 30,
                  style: TextStyle(
                    fontSize: 14.px,
                    color:
                        widget.disabled!
                            ? AppColors.fontColor
                            : AppColors.fontColor,
                  ),
                  decoration: InputDecoration(
                    constraints: BoxConstraints(
                      // 设置高度限制
                      minHeight: 31.px, // 最小高度
                      maxHeight: 31.px, // 最大高度
                    ),
                    contentPadding: EdgeInsets.fromLTRB(4.px, 0, 9, 12),
                    border: InputBorder.none,
                    prefixIconColor: AppColors.fontColorRed,
                    counterText: '',
                    hintText: widget.hint,
                    hintStyle: const TextStyle(
                      color: AppColors.fontColorGray99,
                    ),
                    suffixIcon: SizedBox(
                      width: widget.showClose == true ? 90.px : 60.px,
                      height: 31.px,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Center(
                            child: Row(
                              children: [
                                widget.showClose == true
                                    ? GestureDetector(
                                      onTap: () {
                                        widget.onSearch!('');
                                      },
                                      child: Flex(
                                        direction: Axis.horizontal,
                                        children: [
                                          ImageAssetWidget(
                                            imageUrl:
                                                'static/images/search/close_del.png',
                                            width: 18.px,
                                            height: 18.px,
                                            fit: BoxFit.fitWidth,
                                            alignment: Alignment.topCenter,
                                          ),
                                          hiSpace(width: 12.px),
                                        ],
                                      ),
                                    )
                                    : SizedBox(width: 0),

                                Container(
                                  width: 1.px,
                                  height: 14.px,
                                  color: AppColors.backgroundColorGreyF8,
                                ),
                                hiSpace(width: 12.px),
                                GestureDetector(
                                  onTap: () {
                                    widget.onSearch!(widget.controller!.text);
                                  },
                                  child: Text(
                                    '搜索',
                                    style: TextStyle(
                                      fontSize: 14.px,
                                      color: AppColors.fontColorSearch,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  void _toggle() {
    setState(() {
      _visible = !_visible;
    });
  }
}
